import ECharts from 'echarts'
import { ONE_DAY_MS } from '@/consts/consts'
import {toHHMM, toMMDD, dayEndTime} from './timeUtil'

function getLegend () {
  const screenWidth = window.screen.width
  if (screenWidth < 1377) {
    return {
      show: true,
      textStyle: {
        color: '#fff'
      },
      top: '0%',
      right: '0%',
      icon: 'circle',
      itemGap: 19,
      itemWidth: 12,
      itemHeight: 12
    }
  } else {
    return {
      show: true,
      textStyle: {
        color: '#fff'
      },
      bottom: '0%',
      icon: 'circle',
      itemGap: 19,
      itemWidth: 12,
      itemHeight: 12
    }
  }
}

function getGrid () {
  const screenWidth = window.screen.width
  if (screenWidth < 1377) {
    return {
      left: '5%',
      right: '5%',
      bottom: '6%',
      containLabel: true
    }
  } else {
    return {
      left: '5%',
      right: '5%',
      bottom: '11.5%',
      containLabel: true
    }
  }
}

const rotate = -25

export default {
  xAxisLabelRotate: rotate,
  DETAIL_LEGEND: getLegend(),
  DETAIL_GRID: getGrid(),

  ECHART_LINE_CONFIG: {
    symbol: 'circle',
    type: 'line',
    smooth: true,
    smoothMonotone: 'x'
  },

  BAR_CONFIG: {
    type: 'bar',
    // barMaxWidth: '12%',
    barGap: 0
  },

  LINE: {
    symbol: 'circle',
    type: 'line',
    smooth: true,
    smoothMonotone: 'x'
  },

  ECHART_LINE_CONFIG_BIG_DATA: {
    type: 'line',
    symbol: 'circle',
    smooth: true,
    smoothMonotone: 'x',
    sampling: 'average',
    animation: false,
    showSymbol: false,
    showAllSymbol: false
  },

  // x 和 y
  AXIS_STYLE: {
    nameTextStyle: {
      color: '#c3c6cd'
    },
    // axisLine: {
    //   show: true,
    //   lineStyle: {
    //     color: '#fefefe'
    //   }
    // },
    axisLine: {
      // 轴线
      show: false
    },
    axisLabel: {
      show: true,
      color: '#c3c6cd'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#3E5066'
      }
    }
  },

  XAXIS_STYLE: {
    boundaryGap: false,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#fefefe'
      }
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: true,
      color: '#c3c6cd'
    }

  },
 
  BAR_XAXIS_STYLE: {
    boundaryGap: true,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#6E798B'
      }
    },
    axisTick:{
      show:false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: true,
      color: '#787881'
    }
  },

  XAXIS_CONFIG: {
    boundaryGap: false,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#f1f1f1'
      }
    },
    axisLabel: {
      show: true,
      color: '#787881',
      formatter: (value) => {
        return toHHMM(value)
      },
      rotate: rotate
    },
    splitLine: {
      show: false
    },
    maxInterval: 1 * 3600 * 1000,
    min: function (value) {
      let todayStart = new Date(
        new Date(value.min).toLocaleDateString()
      ).getTime()
      return todayStart
    },
    max: function (value) {
      let todayStart = new Date(
        new Date(value.min).toLocaleDateString()
      ).getTime()
      let todayEnd = todayStart + ONE_DAY_MS
      return todayEnd
    }
  },

  XAXIS_CONFIG_T: {
    boundaryGap: false,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#f1f1f1'
      }
    },
    axisLabel: {
      show: true,
      color: '#787881',
      formatter: (value) => {
        return toHHMM(value)
      },
      rotate: rotate
    },
    splitLine: {
      show: false
    },
    maxInterval: 1 * 3600 * 1000,
    min: function (value) {
      let todayStart = new Date(
        new Date(value.min).toLocaleDateString()
      ).getTime()
      return todayStart
    },
    max: function (value) {
      let todayStart = new Date(
        new Date(value.min).toLocaleDateString()
      ).getTime()
      let todayEnd = todayStart + ONE_DAY_MS - 1
      return todayEnd
    }
  },

  XAXIS_45DEG_CONFIG: {
    axisLabel: {
      show: true,
      rotate: rotate
    },
    splitLine: {
      show: false
    }
  },
  // 时间戳 x轴
  XAXIS_TIME_CONFIG: {
    boundaryGap: false,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#f1f1f1'
      }
    },
    splitLine: {
      show: false
    },
    minInterval: 3600 * 24 * 1000,
    maxInterval: 3600 * 24 * 1000,
    min: function (value) {
      let todayStart = new Date(new Date(value.min).toLocaleDateString()).getTime()
      return todayStart
    },
    max: function (value) {
      return dayEndTime(value.max)
    },
    axisLabel: {
      show: true,
      color: '#787881',
      formatter: (value, index) => {
        let d = toMMDD(new Date(value).getTime())
        let t = toHHMM(new Date(value).getTime())
        return `${d} ${t}`
      }
    }
  },

  TOOLTIP: {
    trigger: 'axis',
    backgroundColor: `#192b41`,
    extraCssText: 'box-shadow:  0 2px 26px 0 rgba(3,62,97,0.14);',
    padding: 10,
    fontFamily: 'SourceHanSansCN-Medium',
    textStyle: {
      // color: '#78798B'
      color: '#fff'
    },
    // position: 'inside',
    confine: true
  },

  styleConfig (color, lineType = 'solid', hasLinear = false, opacity = 1) {
    if (hasLinear) {
      return {
        itemStyle: {
          color: color
        },
        lineStyle: {
          type: lineType,
          color: color,
          opacity: opacity
        },
        areaStyle: {
          origin:'start',
          color: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: color
          }, {
            offset: 1,
            color: '#3C516E'
          }])
        }
      }
    } else {
      return {
        itemStyle: {
          color: color
        },
        lineStyle: {
          type: lineType,
          color: color,
          opacity: opacity
        }
      }
    }
  },

  markLine () {
    let data = []
    for (let i = 0; i < arguments.length; i++) {
      const yValue = arguments[i]
      data.push({
        yAxis: yValue,
        lineStyle: {
          type: 'solid',
          color: '#ff0000'
        }
      })
    }
    return {
      symbol: 'none',
      silent: true,
      label: {
        show: false
      },
      data: data
    }
  },

  tooltipConfig: {
    trigger: 'axis',
    backgroundColor: `#ffffff`,
    extraCssText: 'box-shadow:  0 2px 26px 0 rgba(3,62,97,0.14);',
    padding: 10,
    fontFamily: 'SourceHanSansCN-Medium',
    textStyle: {
      color: '#78798B'
    },
    axisPointer: {
      lineStyle: {
        type: 'dashed'
      }
    }
  }

}
